<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择功能</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.5,maximum-scale=1.0,
    minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="mui-master/dist/css/mui.css">
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
</head>
<style>
    /*基础字体转值：16px 设计稿宽度375*/
      *{
          padding: 0px;
          margin: 0px;
          box-sizing: border-box;
      }
      body{
          background-color: #FFFFFF;
      }
    @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
        html,body {
            font-size:46.08px;
        }
    }
    @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
        html,body {
            font-size:40.96px;
        }
    }
    @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
        html,body {
            font-size:34.13333333333333px;
        }
    }
    @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
        html,body {
            font-size:30.72px;
        }
    }
    @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
        html,body {
            font-size:27.30666666666667px;
        }
    }
    @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
        html,body {
            font-size:25.6px;
        }
    }
    @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
        html,body {
            font-size:23.04px;
        }
    }
    @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
        html,body {
            font-size:20.48px;
        }
    }
    @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
        html,body {
            font-size:17.664px;
        }
    }
    @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
        html,body {
            font-size:17.066666666666666px;
        }
    }
    @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
        html,body {
            font-size:16px;
        }
    }
    @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
        html,body {
            font-size:15.36px;
        }
    }
    @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
        html,body {
            font-size:13.653333333333334px;
        }
    }
    @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
        html,body {
            font-size:10.24px;
        }
    }
    .switchgear{
        width: 100%;
        height: 3rem;
        background:rgba(245,245,245,1);
    }
    .switchgear text{
        display: inline-block;
        width: 100%;
        font-size: 0.875rem;
        line-height: 3rem;
        margin-left: 1rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(105,105,105,1);
    }
    .state{
        display: flex;
        justify-content: space-between;
        padding-left: 1.0625rem;
        padding-right: 1.0625rem;
        width: 100%;
        height: 3rem;
        align-items: center;
        background-color: #FFFFFF;
    }
    .state .open_state{
        font-size: 1rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(40,40,40,1);
        line-height:3rem;
    }
    .mui-switch.mui-active{
        background:rgba(28,145,127,1);
        border-color:rgba(28,145,127,1);
    }
    .mui-switch-mini{
        width: 2.75rem;
        height: 1rem;
    }
    .mui-switch .mui-switch-handle{
        top: -0.5rem;
        left: 0.0625rem;
    }
    .temperature_options{
        width: 100%;
        height: 5.875rem;
        background-color: #FFFFFF;
        display: flex;
    }
    .temperature_options .minus{
        font-size: 1.3125rem;
        mso-ansi-font-weight: 700;
        line-height: 5.875rem;
        margin-left: 3.75rem;
        justify-content: space-between;
        color: #CAE3E8;
    }
    .minus img{
        width: 0.6875rem;
        height: 1.3125rem;
    }
    .temperature_options .add{
        font-size: 1.3125rem;
        mso-ansi-font-weight: 700;
        line-height: 5.875rem;
        margin-right: 3.75rem;
        color: #5BBBB7;
    }
    .add img{
        width: 0.6875rem;
        height: 1.3125rem;
    }
    .temperature_options input{
        border: 0;
        font-size: 3.5rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(40,40,40,1);
        height: 100%;
        line-height: 5.875rem;
        text-align: center;
    }
    .model_select{
        width: 100%;
        height: 8.375rem;
    }
    .model_select,
    .wind_speed_select{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .model_select div,
    .wind_speed_select div{
        width: 3rem;
        height: 1.625rem;
        background:rgba(248,248,248,1);
        border-radius:2px;
        margin-top: 1.6875rem;
        text-align: center;
        line-height: 1.625rem;
        font-size:0.875rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(40,40,40,1);
    }
    .model_select div{
        margin-left: 2rem;
    }
    .model_select .dehumidification{
        margin-right: 2rem;
    }
    .wind_speed_select div{
        margin-top: 1.6875rem;
    }
    .wind_speed_select .tiny{
        margin-left: 2rem;
    }
    .wind_speed_select .high{
        margin-right: 2rem;
    }
    .switch{
        width: 2.75rem;
        height: 1.5rem;
    }
    .switch .opening{
        width: 2.75rem;
        height: 1.5rem;
    }
    .switch .closeing{
        width: 2.75rem;
        height: 1.5rem;
    }
    .addColor{
        color: #FFFFFF!important;
        background-color: #5BBBB7!important;
    }
</style>
<body>
<div class="switchgear">
  <text>开关机</text>
</div>
<div class="state">
  <div class=""open_state>设备开关状态</div>
    <!-- 开关打开状态，多了一个.mui-active类 -->
    <!--<div id="mySwitch" class="mui-switch mui-active mui-switch-mini">-->
        <!--<div class="mui-switch-handle"></div>-->
    <!--</div>-->
    <div class="switch">
        <img class="opening" src="image/opening@3x.png" alt="">
        <img style="display: none" class="closeing" src="image/closeing@3x.png" alt="">
    </div>
</div>
<div class="switchgear">
    <text>温度设置</text>
</div>
<div class="temperature_options">
        <div class="minus"><img src="image/left.png" alt=""></div>
        <input disabled type="text" value="24℃" class="num"/>
        <div class="add"><img src="image/right@3x.png" alt=""></div>
</div>
<!--模式-->
<div class="switchgear">
    <text>模式</text>
</div>
<!--模式选择-->
<div class="model_select">
    <div class="automatic WorkMode_0">自动</div>
    <div class="addColor WorkMode_2">制热</div>
    <div class="WorkMode_1">制冷</div>
    <div class="dehumidification WorkMode_4">除湿</div>
    <div class="blowing_in WorkMode_3">送风</div>
</div>
<!--风速-->
<div class="switchgear">
    <text>风速</text>
</div>
<!--风速选择-->
<div class="wind_speed_select">
    <div class="tiny WindSpeed_1">微</div>
    <div class="WindSpeed_2 addColor">低</div>
    <div class="WindSpeed_3">中</div>
    <div class="high WindSpeed_4">高</div>
</div>
<script src="mui-master/dist/js/mui.js"></script>
<script>

    let data = {
        // functionstr:"开启、 温度 、制热 、低",
        functionStr:"开启、温度 、制冷 、高",
        items:{
            WindSpeed:'2',//风速
            PowerSwitch:'1',//开关
            TargetTemperature:'24℃',//目标温度
            sleep:'2',//模式
        }
    }
    let newFunctionStr = {
        WindSpeed:'',//风速
        PowerSwitch:'',//开关
        TargetTemperature:'',//目标温度
        sleep:'',//模式
    }
    // data = JSON.parse(data);
    //给客户端传参    的函数的封装
    // function biography(data) {
    //     if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS 
    //         window.webkit.messageHandlers.confirmClick.postMessage(data);
    //     } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android//alert(navigator.userAgent);
    //         window.android.confirmClick(data);
    //     }
    // }

    function callBack(data) {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS 
            window.webkit.messageHandlers.functionSelectComplete.postMessage(data);
        } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android//alert(navigator.userAgent);
            window.android.functionSelectComplete(data);
        }
    }
    // 开关的开启和关闭
        // 1.点击之后开启
    $(".closeing").click(function () {
             data.items.PowerSwitch = "1";
             console.log("data.items.PowerSwitch",data.items.PowerSwitch)
             console.log(Object.prototype.toString.call(data.items.PowerSwitch))
             newFunctionStr.PowerSwitch = "开启、"
             $(".closeing").hide()
             $(".opening").show()
           })
        // 2.点击之后关闭
        $(".opening").click(function () {
            data.items.PowerSwitch = "0";
            newFunctionStr.PowerSwitch = "关闭、"
            $(".opening").hide()
            $(".closeing").show()
        })
        //温度设置
    //加的效果
    $(".add").click(function(){
        var n=$(this).prev().val();
        var num=parseInt(n)+1+"℃";
        if( num > "32℃"){ return;}
        $(this).prev().val(num);
        //获取input输入框中的值
        console.log("获取input输入框中的值",$(".num").val());
        data.items.TargetTemperature = $(".num").val();
        newFunctionStr.TargetTemperature = $(".num").val() + "、";
    });
    //减的效果
    $(".minus").click(function(){
        var n=$(this).next().val();
        var num=parseInt(n)-1+"℃";
        if(num < "18℃"){ return;}
        $(this).next().val(num);
        //获取input输入框中的值
        console.log("获取input输入框中的值",$(".num").val());
        console.log(Object.prototype.toString.call($(".num").val()));
        data.items.TargetTemperature = $(".num").val();
        newFunctionStr.TargetTemperature = $(".num").val() + "、";
    });
    // 模式的切换
    // 自动
    $(".WorkMode_0").click(function () {
        data.items.sleep = "0";
        newFunctionStr.sleep = "自动、"
        $(".WorkMode_0").addClass("addColor").siblings().removeClass("addColor");
    })
    // 制冷
    $(".WorkMode_1").click(function () {
        data.items.sleep = "1";
        newFunctionStr.sleep = "制冷、"
        $(".WorkMode_1").addClass("addColor").siblings().removeClass("addColor");
    })
    // 制热
    $(".WorkMode_2").click(function () {
        data.items.sleep = "2";
        newFunctionStr.sleep = "制热、"
        $(".WorkMode_2").addClass("addColor").siblings().removeClass("addColor");
    })

    // 送风
    $(".WorkMode_3").click(function () {
        data.items.sleep = "3";
        newFunctionStr.sleep = "通风、"
        $(".WorkMode_3").addClass("addColor").siblings().removeClass("addColor");
    })
    //  除湿
    $(".WorkMode_4").click(function () {
        data.items.sleep = "4";
        newFunctionStr.sleep = "除湿、"
        $(".WorkMode_4").addClass("addColor").siblings().removeClass("addColor");
    })
    // 风速的切换
    $(".WindSpeed_1").click(function () {
        console.log("微")
        data.items.WindSpeed = "1";
        newFunctionStr.WindSpeed = "微";
        $(".WindSpeed_1").addClass("addColor").siblings().removeClass("addColor");
    })
    $(".WindSpeed_2").click(function () {
        console.log("低")
        data.items.WindSpeed = "2";
        newFunctionStr.WindSpeed = "低";
        $(".WindSpeed_2").addClass("addColor").siblings().removeClass("addColor");
    })
    $(".WindSpeed_3").click(function () {
        console.log("中")
        data.items.WindSpeed = "3";
        newFunctionStr.WindSpeed = "中";
        $(".WindSpeed_3").addClass("addColor").siblings().removeClass("addColor");
    })
    $(".WindSpeed_4").click(function () {
        console.log("高")
        data.items.WindSpeed = "4";
        newFunctionStr.WindSpeed = "高";
        $(".WindSpeed_4").addClass("addColor").siblings().removeClass("addColor");
    })

    // 这个SaveUserInfo的方法是保存用户信息的方法，是让客户端来调用，我只需要把信息放到里面
    function saveUserInfo() {
        data.functionStr = newFunctionStr.PowerSwitch + newFunctionStr.TargetTemperature + newFunctionStr.sleep  + newFunctionStr.WindSpeed;
        // alert("你好")
        // alert(data)
        // data = JSON.parse(data);
        data = JSON.stringify(data)
        callBack(data);
    }
</script>
</body>
</html>